<template>
    <div class="home">
        <div class="topMenu">
            <div class="left">
                <div class="logo" style="width:150px;" @click="handleSelect('/')">DevCat-Admin</div>
                <el-menu style="width:100%; height:50px;" default-active="/" class="el-menu-demo"
                    mode="horizontal" background-color="#34495E" text-color="#fff" active-text-color="#3FAB7F"
                    @select="handleSelect">
                    <el-menu-item index="/"><el-icon><home-filled /></el-icon>首页</el-menu-item>
                    <el-sub-menu index="user">
                        <template #title><el-icon><user-filled /></el-icon>用户管理</template>
                        <el-menu-item index="/userList">用户列表</el-menu-item>
                        <el-menu-item index="/roleList">角色管理</el-menu-item>
                        <el-menu-item index="/apiList">权限管理</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="system">
                        <template #title><el-icon><tools /></el-icon>系统设置</template>
                        <el-menu-item index="/editBlog">发布博客</el-menu-item>
                        <el-menu-item index="/managerBLog">博客管理</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/log"><el-icon><pie-chart /></el-icon>系统日志</el-menu-item>
                </el-menu>
            </div>
            <div class="right">
                <el-button size="small" icon="Message" round>消息</el-button>
                <el-button size="small" type="info" icon="UserFilled" round>{{username}}</el-button>
                <el-button size="small" icon="SwitchButton" @click="logout" round type="info">退出</el-button>
            </div>
        </div>
        <div class="pageBox">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
import { test, logout } from '../js/api.js'
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            username: ''
        }
    },
    methods: {
        test() {
            test({ param: '测试' }).then(res => {
                ElMessage({ message: res.msg, type: res.status ? 'success' : 'error' })
            })
        },
        logout() {
            localStorage.clear('auth-system-token')
            logout().then(res => { this.$router.push('/login') })
        },
        handleSelect(e) {
            this.$router.push(e)
        }
    },
    mounted() {
        this.username = localStorage.getItem('auth-system-username')
    }
}
</script>
<style lang="scss">
.home {
    width: 100%;
    .topMenu {
        width: 100%;
        display: flex;

        .right {
            display: flex;
            align-items: center;
        }

        .left {
            display: flex;
            width: 100%;
        }

        .logo,
        .right {
            height: 49px;
                background-color: #34495E;
                color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
            font-weight: bold;
            border-bottom: 1px solid;
            border-color: #ffffff;
            cursor: pointer;
        }
    }
}
</style>